<!-- Manage Bills //-->

<!-- Current Month (Principle Number) //-->
<div class="manage-bills col1" style="display:block;">
	<div class="manage-bill month0">
		<div class="detailed-bill">
			<div class="charges">
				<ul>
					<li class="details">
						<h4>Current Month</h4>
						<h6>Payment amount due</h6>
						<h1><sup>RM</sup>11,054.02</h1>
						<div class="multisim">
							<span class="select-custom">
								<select name="multisim">
									<option value="">Select a sim card</option>
									<option value="1">123094801907470913</option>
									<option value="2">123094801907470913</option>
								</select>
							</span>
						</div>
						<a href="popups/confirm-payment-amount.php" class="btn paynow">Pay Bill Now<i class="icon-chevron-right"></i></a><!-- please remove this if for supplementary //--> <a href="javascript:void(0);" class="btn grey compare">Compare</a>
						<br />
						<a href="popups/terms-and-conditions.php" class="download-bill">Download Bill</a>
					</li>
					<li class="green monthly-charges"><label>Monthly Charges</label><sup>RM</sup>50.00</li>
					<li class="lightgreen alt"><label>Value Added Services</label><sup>RM</sup>5,000.00<br />
						<p><a href="popups/value-added-services.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="seagreen domestic-charges"><label>Domestic Charges</label><sup>RM</sup>18.35<br />
						<p><a href="popups/domestic-charges.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="lightblue international-charges alt"><label>International Charges</label><sup>RM</sup>0.35<br />
						<p><a href="popups/international-charges.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="babyblue roaming-charges"><label>Roaming Charges</label><sup>RM</sup>18.35<br />
						<p><a href="popups/roaming-charges.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="dullblue data-charges alt"><label>Data Charges</label><sup>RM</sup>56.30</li>
					<li class="dullerblue discounts-rebates"><label>Discounts &amp; Rebates</label><sup>RM</sup>6.53<br />
						<p><a href="popups/discount-rebates.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="blue service-tax alt">
						<label>Service Tax</label><sup>RM</sup>3.10<br />
						<p>Monthly Charges and Value Added Services</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="manage-bill-actions">
		<a href="popups/confirm-payment-amount.php" class="btn paynow">Pay Bill Now<i class="icon-chevron-right"></i></a><!-- please remove this if for supplementary //-->
		<a href="javascript:void(0);" class="btn grey compare">Compare</a>
		<a href="popups/terms-and-conditions.php" class="download-bill">Download Bill</a>
	</div>
</div>
<!-- #END Current Month (Principle Number) //-->

<!-- Previous Month & Current Month (Principle Number) //-->
<div class="manage-bills-container">
<div class="manage-bills col2">
	<div class="manage-bill month0">
		<div class="detailed-bill">
			<div class="charges">
				<ul>
					<li class="details">
						<h4>Current Month</h4>
						<h6>Payment amount due</h6>
						<h1><sup>RM</sup>8,888.88</h1>
						<div class="multisim">
							<span class="select-custom">
								<select name="multisim">
									<option value="">Select a sim card</option>
									<option value="1">123094801907470913</option>
									<option value="2">123094801907470913</option>
								</select>
							</span>
						</div>
						<a href="popups/confirm-payment-amount.php" class="btn paynow">Pay Bill Now<i class="icon-chevron-right"></i></a><!-- please remove this if for supplementary //-->
						<a href="javascript:void(0);" class="btn grey compare">Compare</a>
						<br />
						<a href="popups/terms-and-conditions.php" class="download-bill">Download Bill</a>
					</li>
					<li class="title"><label>Details of Charges</label></li>
					<li class="green monthly-charges">
						<label>Monthly Charges</label><sup>RM</sup>50.00
						<p><strong>Date:</strong><br />
							07.08.2012 - 06.09.2012</p>
						<p>Value 50<br />Monthly Commitment</p>
					</li>
					<li class="lightgreen"><label>Value Added Services</label><sup>RM</sup>5,000.00<br />
						<p><a href="popups/value-added-services.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="seagreen domestic-charges"><label>Domestic Charges</label><sup>RM</sup>18.35<br />
						<p><a href="popups/domestic-charges.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="lightblue international-charges"><label>International Charges</label><sup>RM</sup>0.35<br />
						<p><a href="popups/international-charges.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="babyblue roaming-charges"><label>Roaming Charges</label><sup>RM</sup>18.35<br />
						<p><a href="popups/roaming-charges.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="dullblue data-charges"><label>Data Charges</label><sup>RM</sup>56.30</li>
					<li class="dullerblue discounts-rebates"><label>Discounts &amp; Rebates</label><sup>RM</sup>6.53<br />
						<p><a href="popups/discount-rebates.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="blue service-tax">
						<label>Service Tax</label><sup>RM</sup>3.10<br />
						<p>Monthly Charges and<br />Value Added Services</p>
						<div class="manage-bill-actions">
							<a href="popups/terms-and-conditions.php" class="download-bill">Download Bill</a>
							<a href="popups/confirm-payment-amount.php" class="btn paynow">Pay Bill Now<i class="icon-chevron-right"></i></a><!-- please remove this if for supplementary //-->
							<a href="javascript:void(0);" class="btn grey compare">Compare</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="manage-bill month1">
		<a href="javascript:void(0);" class="close-mobile"><i class="icon-remove-sign"></i></a>
		<div class="detailed-bill">
			<div class="charges">
				<ul>
					<li class="details">
						<h4>January 2013</h4>
						<h6>Payment amount due</h6>
						<h1><sup>RM</sup>154.02</h1>
						<div class="select">
							<span class="select-custom">
								<select name="month">
									<option value="1">Jan 2013</option>
									<option value="2">Dec 2012</option>
									<option value="3">Nov 2012</option>
									<option value="4">Oct 2012</option>
									<option value="5">Sept 2012</option>
									<option value="6">Aug 2012</option>
								</select>
							</span>
						</div>
						<a href="popups/terms-and-conditions.php" class="download-bill">Download Bill</a>
					</li>
					<li class="title"><label>Details of Charges</label></li>
					<li class="green monthly-charges">
						<label>Monthly Charges</label><sup>RM</sup>50.00
						<p><strong>Date:</strong><br />
							07.07.2012 - 06.08.2012</p>
						<p>Value 50<br />Monthly Commitment</p>
					</li>
					<li class="lightgreen"><label>Value Added Services</label><sup>RM</sup>5,000.00<br />
						<p><a href="popups/value-added-services.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="seagreen domestic-charges"><label>Domestic Charges</label><sup>RM</sup>18.35<br />
						<p><a href="popups/domestic-charges.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="lightblue international-charges"><label>International Charges</label><sup>RM</sup>0.35<br />
						<p><a href="popups/international-charges.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="babyblue roaming-charges"><label>Roaming Charges</label><sup>RM</sup>18.35<br />
						<p><a href="popups/roaming-charges.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="dullblue data-charges"><label>Data Charges</label><sup>RM</sup>56.30</li>
					<li class="dullerblue discounts-rebates"><label>Discounts &amp; Rebates</label><sup>RM</sup>6.53<br />
						<p><a href="popups/discount-rebates.php" class="detailed-charges">Details of charges</a></p></li>
					<li class="blue service-tax">
						<label>Service Tax</label><sup>RM</sup>3.10<br />
						<p>Monthly Charges and<br />Value Added Services</p>
						<div class="manage-bill-actions">
							<a href="popups/terms-and-conditions.php" class="download-bill">Download Bill</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
</div>
<!-- #END Previous Month & Current Month (Principle Number) //-->



<script type="text/javascript">
	$(document).ready(function() {

	    $(".detailed-charges,.paynow,.download-bill").fancybox({
	    	type		: 'ajax',
			width		: 400,
			height		: 500,
			fitToView	: true,
			autoSize	: true,
			closeClick	: false,
			openEffect	: 'fade',
			closeEffect	: 'fade',
			padding		: 0
		});

		$('.col1 .compare').click(function() {
			$('.col1').slideUp();
			$('.col2').slideDown("fast", function() {
				$("html, body").animate({ scrollTop: 0 }, "fast");
			});
			var width = $(window).width();
			if (width <= 492) {
				var containerWidth = $('.manage-bills-container .manage-bill').width();
				alert(containerWidth);
				$('.manage-bills-container').find('.manage-bills').animate({
					marginLeft: '-='+containerWidth+'px'
				}, 500);
			}
		});

		$('.manage-bills-container .month0 .compare').click(function() {
			var containerWidth = $(this).parents(".manage-bill").width();
			$(this).parents('.manage-bills-container').find('.manage-bills').animate({
				marginLeft: '-='+containerWidth+'px'
			}, 500);
		});

		$('.manage-bills-container .month1 .close-mobile').click(function() {
			$(this).parents('.manage-bills-container').find('.manage-bills').animate({
				marginLeft: '0px'
			}, 500);
		});

	});
</script>

